<template>
  <div class="scheduling-container">
    <div class="date-time">
      <el-date-picker v-model="datetime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" :clearable="false" @change="dateTimeChange"></el-date-picker>
    </div>
    <div class="btn-container">
      <el-button type="primary" @click="dianChange">电负荷变化</el-button>
    </div>

    <div class="tip-1 one">区外</div>
    <div class="tip-2 one">区内</div>
    <div class="line"></div>

    <div class="main-1 one">市政供气</div>
    <div class="main-2 one">市政供电{{info.supplyPowerLoad}}</div>
    <div class="main-3 one">市政供热{{ info.municipalHeatLoad }}</div>

    <div class="main-4 one">天然气</div>
    <div class="main-5 one">电</div>
    <div class="main-6 one">热</div>
    <div class="main-7 one">冷</div>

    <div class="main-8 one">储电{{ info.storagePowerLoad }}</div>
    <div class="main-9 one">光伏发电{{ info.sunPowerLoad }}</div>
    <div class="main-10 one">燃气锅炉{{ info.fuelBoilerHeatLoad }}</div>
    <div class="main-11 one">储热（生产、生活预热）{{ info.storageHeatPowerLoad }}</div>
    <div class="main-12 one">
      <p>浅层地源热泵 制冷量{{ info.shallowLandCoolLoad }} 制热量{{ info.shallowLandHeatLoad }}</p>
    </div>
    <div class="main-13 one">空气源热泵{{ info.airSourceCoolLoad }}</div>

    <div class="right-container">
      <p>冷负荷：{{ info.usePowertCoolingLoadLoad }}</p>
      <p>热负荷：{{ info.usePowertHeatLoadLoad }}</p>
      <p>电负荷：{{ info.usePowertElectricLoadLoad }}</p>
      <p>用能侧</p>
      <p>科研楼</p>
      <p>生活配套楼</p>
      <p>汽轮机实验楼</p>
      <p>锅炉实验楼</p>
      <p>金属材料实验楼</p>
      <p>电站化学和水处理实验楼</p>
      <p>生产厂房及库房</p>
    </div>
    <div v-if="data">
      <div class="line-1 lines play" :class="data['ONE']"></div>
      <div class="line-2 lines play" :class="data['TWO']"></div>
      <div class="line-3 lines play" :class="data['THREE']"></div>
      <div class="line-4 lines play" :class="data['FOUR']"></div>

      <div class="line-5 lines play" :class="data['TEN']"></div>
      <div class="line-6 lines play" :class="data['FIVE']"></div>
      <div class="line-7 lines play" :class="data['SEVEN']"></div>
      <div class="line-8 lines play" :class="data['SIX']"></div>
      <div class="line-9 lines play" :class="data['EIGHT']"></div>
      <div class="line-10 lines play" :class="data['NINE']"></div>
      <div class="line-11 lines play" :class="data['FIFTEEN']"></div>
      <div class="line-12 lines play" :class="data['THIRTEEN']"></div>
      <div class="line-13 lines play" :class="data['FOURTEEN']"></div>
      <div class="line-14 lines play" :class="data['TWELVE']"></div>
      <div class="line-15 lines play" :class="data['SEVENTEEN']"></div>
      <div class="line-16 lines play" :class="data['SIXTEEN']"></div>
      <div class="line-17 lines play" :class="data['ELEVEN']"></div>
      <div class="line-18 lines play" :class="data['EIGHTEEN']"></div>
      <div class="line-19 lines play" :class="data['NINETEEN']"></div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data() {
    return {
      data: null,
      datetime: null,
      info: {
        supplyPowerLoad: null,
        sunPowerLoad: null,
        storagePowerLoad: null,
        airSourceCoolLoad: null,

      }
    };
  },
  mounted() {
    this.getData();
    this.getInfo()
  },
  methods: {
    async dianChange () {
      const res = await this.$fetchGet('/line/eighteen')
      this.getData()
    },
    async dateTimeChange (e) {
      const res = await this.$fetchGet(`/power/test/${moment(e).valueOf()}`)
      if (!res.success) {
        this.$message.error(res.error)
        return
      }
      this.$message.success('时间修改成功')
      this.getData()
    },
    async getData() {
      // POSITIVE("POSITIVE", "正向"),
      // NEGATIVE("NEGATIVE", "逆向"),
      // OFF("OFF", "关闭");
      const result = await this.$fetchGet("/line/findAll");
      this.data = {};
      result.result.forEach(item => {
        this.data[item.lineEnum] = item.status;
      });
    },
    async getInfo () {
      const result = await this.$fetchGet('/power/findLineData')
      console.log(result)
      this.info = result.result
    }
  }
};
</script>

<style lang="less">
.scheduling-container {
  width: 1200px;
  margin: 0 auto;
  height: 800px;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  .btn-container {
    position: absolute;
    right: 300px;
    top: 30px;
  }
  .date-time {
    position: absolute;
    right: 0;
    top: 30px;
  }
  .lines {
    position: absolute;
    &.OFF {
      display: none;
    }
  }
  .line-1 {
    top: 250px;
    left: 100px;
    width: 900px;
    height: 20px;
    background: #f9d35e;
    border: 1px solid #707070;
    &.play {
      background: url("~static/images/yellow.gif");
      background-size: 83px 20px;
    }
  }
  .line-2 {
    top: 400px;
    left: 150px;
    width: 850px;
    height: 20px;
    background: #f9d35e;
    border: 1px solid #197dc5;
    &.play {
      background: url("~static/images/blur.gif");
      background-size: 83px 20px;
    }
  }
  .line-3 {
    top: 550px;
    left: 150px;
    width: 850px;
    height: 20px;
    background: #f9d35e;
    border: 1px solid #fd2525;
    &.play {
      background: url("~static/images/red.gif");
      background-size: 83px 20px;
    }
  }
  .line-4 {
    top: 700px;
    left: 100px;
    width: 900px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    &.play {
      background: url("~static/images/zise.gif");
      background-size: 83px 20px;
    }
  }
  .line-5 {
    top: 350px;
    left: 520px;
    width: 180px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/yellow.gif");
      background-size: 83px 20px;
    }
  }
  .line-6 {
    top: 350px;
    left: 330px;
    width: 80px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/blur.gif");
      background-size: 83px 20px;
    }
  }
  .line-7 {
    top: 350px;
    left: 500px;
    width: 80px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/blur.gif");
      background-size: 83px 20px;
    }
  }
  .line-8 {
    top: 350px;
    left: 370px;
    width: 80px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(270deg);
    &.play {
      background: url("~static/images/blur.gif");
      background-size: 83px 20px;
    }
  }

  .line-9 {
    top: 500px;
    left: 390px;
    width: 180px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/blur.gif");
      background-size: 83px 20px;
    }
  }
  .line-10 {
    top: 500px;
    left: 590px;
    width: 180px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/blur.gif");
      background-size: 83px 20px;
    }
  }
  .line-11 {
    top: 460px;
    left: 870px;
    width: 130px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(180deg);
    &.play {
      background: url("~static/images/red.gif");
      background-size: 83px 20px;
    }
  }
  .line-12 {
    top: 510px;
    left: 730px;
    width: 60px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/red.gif");
      background-size: 83px 20px;
    }
  }
  .line-13 {
    top: 510px;
    left: 790px;
    width: 60px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(270deg);
    &.play {
      background: url("~static/images/red.gif");
      background-size: 83px 20px;
    }
  }
  .line-14 {
    top: 575px;
    left: 500px;
    width: 30px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(270deg);
    &.play {
      background: url("~static/images/red.gif");
      background-size: 83px 20px;
    }
  }
  .line-15 {
    top: 660px;
    left: 470px;
    width: 60px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/zise.gif");
      background-size: 83px 20px;
    }
  }
  .line-16 {
    top: 660px;
    left: 650px;
    width: 60px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/zise.gif");
      background-size: 83px 20px;
    }
  }
  .line-17 {
    top: 510px;
    left: 580px;
    width: 60px;
    height: 20px;
    background: #834cac;
    border: 1px solid #707070;
    transform: rotate(90deg);
    &.play {
      background: url("~static/images/red.gif");
      background-size: 83px 20px;
    }
  }
  .line-18 {
    top: 400px;
    left: 100px;
    width: 50px;
    height: 20px;
    background: #f9d35e;
    border: 1px solid #197dc5;
    &.play {
      background: url("~static/images/blur.gif");
      background-size: 83px 20px;
    }
  }
  .line-19 {
    top: 550px;
    left: 100px;
    width: 50px;
    height: 20px;
    background: #f9d35e;
    border: 1px solid #fd2525;
    &.play {
      background: url("~static/images/red.gif");
      background-size: 83px 20px;
    }
  }
  .right-container {
    width: 200px;
    position: absolute;
    border: 1px solid #707070;
    right: 0;
    top: 100px;
    border-radius: 50px;
    text-align: center;
    height: 700px;
    padding-top: 100px;
    background: #4e66b2;
    p {
      color: #fff;
      margin-bottom: 30px;
    }
  }
  div.one {
    position: absolute;
    text-align: center;
    // width: 80px;
    z-index: 1;
    background: #ffffff;
    padding: 0 10px;
    line-height: 40px;
    border: 1px solid #707070;
    border-radius: 50px;
  }
  .tip-1 {
    top: 50px;
  }
  .tip-2 {
    top: 50px;
    left: 200px;
  }
  .line {
    position: absolute;
    height: 750px;
    top: 50px;
    left: 150px;
    border: 1px dashed #f00;
  }
  .main-1 {
    top: 150px;
    background: #197dc5;
  }
  .main-2 {
    top: 300px;
    background: #197dc5;
  }
  .main-3 {
    top: 450px;
    background: #fd2525;
  }
  .main-4 {
    left: 200px;
    background: #fbcc3e;
    top: 150px;
  }
  .main-5 {
    left: 200px;
    background: #197dc5;
    top: 300px;
  }
  .main-6 {
    left: 200px;
    background: #fd2525;
    top: 450px;
  }
  .main-7 {
    left: 200px;
    background: #834cac;
    top: 600px;
  }
  .main-8 {
    top: 280px;
    left: 330px;
  }
  .main-9 {
    top: 280px;
    left: 500px;
  }
  .main-10 {
    top: 450px;
    left: 520px;
  }
  .main-11.one {
    top: 450px;
    left: 720px;
    // width: 150px;
    padding: 0 10px;
    font-size: 12px;
  }
  .main-12.one {
    padding: 0 10px;
    top: 600px;
    left: 350px;
    font-size: 12px;
  }
  .main-13.one {
    padding: 0 10px;
    top: 600px;
    left: 620px;
    font-size: 12px;
  }
}
</style>